<template>
  <el-drawer
      v-model="props['show']"
      direction="ltr"
      @closed="emit('close')"
  >
    <template #title>
      <div class="headerTitle">
        筛选
      </div>
    </template>
    <div v-if="props['mode']===0" class="drawerBody">
      <el-form
          v-model="empForm"
          label-width="200px"
          label-position="left"
      >
        <el-form-item label="Select by Id">
          <el-input-number v-model="empForm.id"/>
        </el-form-item>
        <el-form-item label="Select by Name">
          <el-input v-model="empForm.name"/>
        </el-form-item>
        <el-form-item label="Select by Status">
          <el-select v-model="empForm.status">
            <el-option label="在职" value="在职"></el-option>
            <el-option label="兼职" value="兼职"></el-option>
            <el-option label="试用" value="试用"></el-option>
            <el-option label="离职" value="离职"></el-option>
            <el-option label="返聘" value="返聘"></el-option>
            <el-option label="退休" value="退休"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Select by ArriveDate">
          <el-date-picker
              v-model="empForm.arriveDate"
              type="date"
          />
        </el-form-item>
        <el-form-item label="Select by WorkPlace">
          <el-input v-model="empForm.workPlace"/>
        </el-form-item>
        <el-form-item label="Select by Job">
          <el-input v-model="empForm.job"/>
        </el-form-item>
        <el-form-item label="Select by DepartmentId">
          <el-input-number v-model="empForm.depId"/>
        </el-form-item>
        <el-button
            :style="{marginTop: '80px'}"
            type="primary"
            @click="submit"
        >submit
        </el-button>
      </el-form>
    </div>
    <div v-else-if="props['mode']===1">
      <el-form
          v-model="depForm"
          label-width="200px"
          label-position="left"
      >
        <el-form-item label="Select by DepId">
          <el-input-number v-model="depForm.depId"/>
        </el-form-item>
        <el-form-item label="Select by Name">
          <el-input v-model="depForm.name"/>
        </el-form-item>
        <el-button
            :style="{marginTop: '80px'}"
            type="primary"
            @click="submit"
        >submit
        </el-button>
      </el-form>
    </div>
    <div v-else-if="props['mode']===2">
      <el-form
          v-model="transForm"
          label-width="200px"
          label-position="left"
      >
        <el-form-item label="Select by Id">
          <el-input-number v-model="transForm.id"/>
        </el-form-item>
        <el-form-item label="Select by WorkerId">
          <el-input-number v-model="transForm.workerId"/>
        </el-form-item>
        <el-form-item label="Select by Date">
          <el-date-picker
              v-model="transForm.transDate"
              type="date"
          />
        </el-form-item>
        <el-form-item label="Select by InDepId">
          <el-input-number v-model="transForm.inDepId"/>
        </el-form-item>
        <el-form-item label="Select by OutDepId">
          <el-input-number v-model="transForm.outDepId"/>
        </el-form-item>
        <el-button
            :style="{marginTop: '80px'}"
            type="primary"
            @click="submit"
        >submit
        </el-button>
      </el-form>
    </div>

  </el-drawer>

</template>

<script setup>
import {defineEmits, defineProps, ref} from "vue";
import {ElDrawer, ElForm, ElFormItem, ElInput} from "element-plus"
import "ant-design-vue/lib/form/style/index.css"

const props = defineProps(["show", "mode"])
const emit = defineEmits(["close", "getFilter"])


let empFormData = {
  id: -1,
  name: null,
  status: null,
  arriveDate: null,
  workPlace: null,
  job: null,
  depId: -1,
}
let depFormData = {
  depId: -1,
  name: null,
}
let transFormData = {
  id: -1,
  workerId: -1,
  transDate: null,
  inDepId: -1,
  outDepId: -1,
  why: null
}
const empForm = ref(empFormData)
const depForm = ref(depFormData)
const transForm = ref(transFormData)
const submit = () => {
  if (props["mode"] === 0) {
    emit('getFilter', empFormData)
  } else if (props["mode"] === 1) {
    emit('getFilter', depFormData)
  } else {
    emit('getFilter', transFormData)
  }

}

</script>

<style scoped>
.headerTitle {
  width: 431px;

}

</style>